<template>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import bg from './gdbg.png';
import bg2 from './组4.png';
let chart = ref();
let initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    myChart.showLoading();
    let smallNodeSize = 70;
    let bigNodeSize = 138;

    let options = {
        tooltip: {
            show: false
        },
        color: ['rgba(255,255,255,0)'],
        backgroundColor: '#000',
        series: [
            {
                type: 'graph',
                layout: "force",
                draggable: true,
                force: {
                    initLayout: "circular",
                    repulsion: 3.5*bigNodeSize,
                    edgeLength: bigNodeSize
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true
                        }
                    },
                },
                categories: [
                    {
                        name: '球1'
                    },
                    {
                        name: '球2'
                    },
                    {
                        name: '球3'
                    }
                ],
                nodes: [
                    // 球一
                    {
                        id: '1-0',
                        category: 0,
                        name: '0',
                        label: '球1',
                        symbolSize: bigNodeSize,
                    },
                    {
                        id: '1-1',
                        category: 0,
                        name: '0',
                        label: '球1-1',
                        symbolSize: smallNodeSize,
                    },
                    {
                        id: '1-2',
                        category: 0,
                        name: '0',
                        label: '球1-2',
                        symbolSize: smallNodeSize,
                    },
                    {
                        id: '1-3',
                        category: 0,
                        name: '0',
                        label: '球1-3',
                        symbolSize: smallNodeSize,
                    },
                    // 球二
                    {
                        id: '2-0',
                        category: 1,
                        name: '0',
                        label: '球2',
                        symbolSize: bigNodeSize,
                    },
                    {
                        id: '2-1',
                        category: 1,
                        name: '0',
                        label: '球2-1',
                        symbolSize: smallNodeSize,
                    },
                    {
                        id: '2-2',
                        category: 1,
                        name: '0',
                        label: '球2-2',
                        symbolSize: smallNodeSize,
                    },
                    {
                        id: '2-3',
                        category: 1,
                        name: '0',
                        label: '球2-3',
                        symbolSize: smallNodeSize,
                    },
                    // 球三
                    {
                        id: '3-0',
                        category: 2,
                        name: '0',
                        label: '球3',
                        symbolSize: bigNodeSize,
                    },
                    {
                        id: '3-1',
                        category: 2,
                        name: '0',
                        label: '球3-1',
                        symbolSize: smallNodeSize,
                    },
                    {
                        id: '3-2',
                        category: 2,
                        name: '0',
                        label: '球3-2',
                        symbolSize: smallNodeSize,
                    },
                    {
                        id: '3-3',
                        category: 2,
                        name: '0',
                        label: '球3-3',
                        symbolSize: smallNodeSize,
                    }
                ],
                links: [
                    // 球一开始
                    {
                        source: '1-0',
                        target: '1-1',
                    },
                    {
                        source: '1-0',
                        target: '1-2'
                    },
                    {
                        source: '1-0',
                        target: '1-3'
                    },
                    // 球二开始
                    {
                        source: '2-0',
                        target: '2-1'
                    },
                    {
                        source: '2-0',
                        target: '2-2'
                    },
                    {
                        source: '2-0',
                        target: '2-3'
                    },
                    // 球三开始
                    {
                        source: '3-0',
                        target: '3-1'
                    },
                    {
                        source: '3-0',
                        target: '3-2'
                    },
                    {
                        source: '3-0',
                        target: '3-3'
                    }
                ]
            }
        ]
    }

    // 隐藏连接线
    options.series[0].links.forEach((link) => {
        link['lineStyle'] = {
            width: 0
        }
    })
    // 大球 的symbol设置 以及样式其它。。
    options.series[0].nodes.forEach((node) => {
        if (node.id.split('-')[1] == 0) {
            node['symbol'] = 'image://' + bg;
            node['label'] = {
                show: true,
                // textShadowColor: '#75ADFB',
                // textShadowBlur: 20,
                fontSize: 20,
                color: '#75ADFB',
                formatter: function (formatterParam) {
                    let name_ = formatterParam.data.name;
                    return name_;
                }
            }
        }else{
            node['symbol'] = 'image://' + bg2;
        }
    })

    let active = '1-0';
    let clickNodesFun = () => {
        options.series[0].nodes.forEach((node) => {
            if (node.id.split('-')[1] != 0) {
                node['itemStyle'] = {
                    opacity: 0,
                }
                // 小球label 样式
                node['label'] = {
                    show: true,
                    formatter: function (formatterParam) {
                        let name_ = formatterParam.data.name;
                        return `{a|${name_}}\n{b|${name_}}`;
                    },
                    //偏移 由于加了 \n换行（不加rich宽高设置完毕不会换行）宽高区域没有顶在球的顶部有偏差；移动10像素
                    offset: [0, 17],      //rich b的高度/2
                    rich: {
                        a: {
                            color: '#75ADFB',
                            height: smallNodeSize,
                            width: smallNodeSize,
                            lineHeight: smallNodeSize,
                            align: 'center',
                            fontSize: 30,

                            // textShadowColor: 'red',
                            // textShadowBlur: 20,
                        },
                        b: {
                            width: smallNodeSize,
                            height: 30,
                            align: 'center',
                            lineHeight: 30,
                            fontSize: 20,
                            color: "#fff"
                        }
                    }
                }

            }
            let active_split = active.split('-')
            let active_1 = active_split[0];
            let active_2 = active_split[1];
            let nodeId_split = node.id.split('-');
            let nodeId_1 = nodeId_split[0];
            let nodeId_2 = nodeId_split[1];
            if (active_1 == nodeId_1) {
                node['itemStyle'] = {
                    opacity: 1,
                    borderWidth: 2,
                    borderColor: '#75ADFB'
                }
            }
        })
    }
    clickNodesFun();

    myChart.setOption(options);
    myChart.on('click', (eventParam) => {
        let nodeId = eventParam.data.id;
        if (nodeId.split('-')[1] == 0) {
            active = nodeId;
            clickNodesFun();
        }
        myChart.setOption(options);
    })
    myChart.hideLoading();
}
onMounted(() => {
    initChart();
})
</script>

<style lang="less" scoped>
.chart {
    width: 1200px;
    height: 600px;
}
</style>